<template>
  <div class="container">
    <div class="title">
      <div>
        <router-link to="/">登录</router-link>
      </div>
      <div>
        <router-link to="/Register">注册</router-link>
      </div>
    </div>
    <router-view></router-view>
    <div class="find-password" @click="open" :loading="isLoading">找回密码</div>
    <div style="display:flex" v-if="show">
      <el-input v-model="username" placeholder="请输入用户名"></el-input>
      <el-button @click="sendUser" :loading="isLoading">验证</el-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
let isLoading = ref(false);
let username = ref('');
let show = ref(false);
const open = () => {
  show.value = !show.value;
}
const router = useRouter()
const sendUser = () => {
  console.log(username);
  if (username.length < 3 || username.length > 10) {
    alert('用户名为3-10个字符')
    return;
  }
  else {
    isLoading.value=true;
    const userName=username.value;
    axios.get('http://localhost', {
      params: {
        userName
      }
    }).then(() => {
      router.replace({name:'findPassword',query: { userName:username.value }});
      isLoading.value=false;
    }).catch(() => {
      router.replace({name:'findPassword',query: { userName:username.value }});
      isLoading.value=false;
      
    })
  }
}

</script>

<style scoped>
.find-password {
  color: skyblue;
  font-size: 14px;
  cursor: pointer;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  flex-direction: column;
}
.title {
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  font-weight: bold;
  width: 50%;
  margin: 5px 0;
}
</style>